<script lang="ts" setup>
import { getOSSURL } from "@/utils/utils";
import { getAllNormalSpuPage } from "@/api/train/product";
import { useRouter } from "vue-router";
import { useNewsStore } from "@/store/modules/news";

const router = useRouter();
const newsStore = useNewsStore();

// 轮播图
const page = ref(0);
const srcList = ref([
  {
    type: "img",
    src: "https://szwj-saas.oss-cn-hangzhou.aliyuncs.com/imgs/h5-news/imgs/%E6%96%B0%E8%BD%AE%E6%92%AD1.png",
    content: {
      title: "江西乐平成功驾校",
      desc: ["国家一级驾校，全国行业自律先进驾校", "全车型培训考试一体化基地"],
      btnText: "了解更多",
      onClick: () => {
        router.push("/school/about");
      },
    },
  },
  {
    type: "video",
    src: "https://szwj-saas.oss-cn-hangzhou.aliyuncs.com/imgs/h5-news/video/%E9%A6%96%E9%A1%B51.mp4",
  },
  {
    type: "video",
    src: "https://szwj-saas.oss-cn-hangzhou.aliyuncs.com/imgs/h5-news/video/%E9%A6%96%E9%A1%B52.mp4",
  },
]);

// 过滤上下左右滑动
const pos = {
  startX: 0,
  startY: 0,
};
const preventDefault = ref(false);
const handleTouchStart = (e: TouchEvent) => {
  pos.startX = e.touches[0].clientX;
  pos.startY = e.touches[0].clientY;
  preventDefault.value = false;
};
const handleTouchMove = (e: TouchEvent) => {
  const diffX = Math.abs(e.touches[0].clientX - pos.startX);
  const diffY = Math.abs(e.touches[0].clientY - pos.startY);

  if (diffY < diffX) {
    preventDefault.value = true;
    e.preventDefault();
    e.stopPropagation();
  }
};

const videoRefs = ref<{ [key: number]: HTMLVideoElement }>({});
const handleSwiperChange = (value: number) => {
  // 处理滑动时自动暂停播放视频
  Object.values(videoRefs.value).forEach((video) => video.pause());
  const video = videoRefs.value[value];
  video?.play();

  // 滤xy波
  preventDefault.value = false;
};

// 加载课程列表
const spuList = ref<ListProductSpu[]>([]);
getAllNormalSpuPage({
  pageNo: 1,
  pageSize: 4,
}).then((res) => {
  spuList.value = res.data.list;
});
</script>

<template>
  <!-- 轮播图 -->
  <div class="relative h-full bg-white" @touchstart="handleTouchStart" @touchmove="handleTouchMove">
    <nut-swiper
      class="h-full"
      :init-page="page"
      :pagination-visible="true"
      pagination-color="#426543"
      :is-prevent-default="preventDefault"
      :is-stop-propagation="false"
      @change="handleSwiperChange"
    >
      <nut-swiper-item v-for="(item, index) in srcList" :key="item.src">
        <div class="relative h-full">
          <video v-if="item.type === 'video'" :ref="(el: HTMLVideoElement) => (videoRefs[index] = el)" class="w-full" :src="item.src" loop />
          <img v-if="item.type === 'img'" class="h-full w-full object-cover" :src="item.src" alt="" />

          <!-- 附加内容 -->
          <div v-if="item.content" class="absolute inset-0 flex flex-col items-center text-white">
            <h2 class="mt-20 text-2xl">{{ item.content.title }}</h2>
            <div class="mt-5 text-center opacity-90">
              <p v-for="descItem in item.content.desc" :key="descItem">{{ descItem }}</p>
            </div>
            <div class="mt-8 px-10 py-2 bg-white/80 c-blue text-base rd-full" @click="item.content.onClick">{{ item.content.btnText }}</div>
          </div>
        </div>
      </nut-swiper-item>
    </nut-swiper>
  </div>
  <!-- 推荐班型 -->
  <div class="bg-white">
    <div class="text-2xl font-bold py-5 px-3 border-b-1">推荐班型</div>
    <div class="grid grid-cols-2">
      <div v-for="item in spuList" :key="item.id" class="p-3" @click="router.push(`/mall/${item.id}`)">
        <img class="w-full h-30 object-cover rd-3 of-hidden" :src="getOSSURL(item.coverUrl)" alt="" />
        <div class="mt-3">{{ item.spuName }} ￥{{ item.salePrice / 100 }}</div>
      </div>
    </div>
  </div>

  <!-- 驾校教练 -->
  <div class="bg-white">
    <div class="text-2xl font-bold py-5 px-3 border-b-1">驾校教练</div>
    <div class="flex of-x-scroll of-y-hidden">
      <div v-for="item in newsStore.teachers" class="shrink-0 flex w-45 justify-items-center h-60 m-3">
        <div>
          <img :src="item.imgSrc" alt="" />
          <div class="text-center">
            <p>{{ item.name }}</p>
            <p>{{ item.detail }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 视频 -->
  <div>
    <video controls :src="getOSSURL('/imgs/h5-news/video/宣传视频.mp4')"></video>
  </div>

  <!-- 培训资讯 -->
  <div class="bg-white py-3 px-3">
    <div>
      <div class="text-2xl font-bold py-3 border-b-1">培训资讯</div>
    </div>
    <div>
      <div class="text-xl py-2">新规路考注意事项 考试细节时刻牢记</div>
      <div class="text-sm text-slate-400 py-1">实际道路安全驾驶考试技巧你知道多少? 考生参加科目考试</div>

      <div class="text-sm text-slate-400 py-1">2016/09/08</div>
    </div>
    <div>
      <div class="text-xl py-2">科目四约考最新政策，大大缩短时间，提升通过率</div>
      <div class="text-sm text-slate-400 py-1">
        拿证再迈新速度！新改革下，科目四考试可是发生了巨大改变，约考补考时间都大大缩短了，如果你还不知道，赶紧看下去。
      </div>

      <div class="text-sm text-slate-400 py-1">2016/09/30</div>
    </div>
    <div>
      <div class="text-xl py-2">乐平市举办第七届“成功驾校杯”新春围棋邀请赛</div>
      <div class="text-sm text-slate-400 py-1">
        日前，乐平市第七届“成功驾校杯”新春围棋邀请赛在乐平市围棋协会举办，这是成功驾校驾校连续第七年提供赞助和支持，现已成为了乐平市围棋爱好者的传统赛事。
      </div>

      <div class="text-sm text-slate-400 py-1">2016/10/30</div>
    </div>
  </div>
</template>
